<!--
 * @Description: 用户信息
 * @Autor: Zhu_liangyu
 * @Date: 2020-07-15 10:01:42
--> 
<template>
  <div class="future-user-message-container">
    <a-tabs
      size="small"
      v-model="currentTabKey"
      class="future-user-message-tab"
      @change="changeTab"
    >
      <a-tab-pane key="notice" :tab="'通知 ('+noticeData.length+')'">
        <div class="future-user-notice-list">
          <a-row
            type="flex"
            justify="space-around"
            align="middle"
            class="future-user-notice-item"
            v-for="(item,key) in noticeData"
            :key="key"
          >
            <a-col :span="4" class="future-user-notice-item-img">
              <a-avatar
                :style="{color: item.color, backgroundColor: item.backgroundColor}"
              >{{item.userName}}</a-avatar>
            </a-col>
            <a-col :span="20">
              <div class="future-user-notice-item-title">
                <h4>{{item.content}}</h4>
              </div>
              <div class="future-user-notice-item-time">
                <span>{{item.time}}</span>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane key="news" tab="消息 (2)" force-render>
        <div class="future-user-notice-list">
          <a-row
            type="flex"
            justify="space-around"
            align="middle"
            class="future-user-notice-item"
            v-for="(item,key) in newsData"
            :key="key"
          >
            <a-col :span="4" class="future-user-notice-item-img">
              <a-avatar
                :style="{color: item.color, backgroundColor: item.backgroundColor}"
              >{{item.userName}}</a-avatar>
            </a-col>
            <a-col :span="20">
              <div class="future-user-notice-item-title">
                <h4>{{item.content}}</h4>
              </div>
              <div class="future-user-notice-item-time">
                <span>{{item.time}}</span>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane key="watting" tab="待办 (1)">
        <div class="future-user-notice-list">
          <a-row
            type="flex"
            justify="space-around"
            align="middle"
            class="future-user-notice-item"
            v-for="(item,key) in waitingData"
            :key="key"
          >
            <a-col :span="24">
              <div class="future-user-notice-item-title">
                <h4>
                  {{item.taskName}}
                  <a-tag :color="item.status|switchType">{{item.statusDesc}}</a-tag>
                </h4>
              </div>
              <div class="future-user-notice-item-desc">
                <span>{{item.description}}</span>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
    </a-tabs>
    <a-row type="flex" justify="space-around" align="middle">
      <a-spin :spinning="spinning">
        <div
          :class="['future-user-notice-more',isLoadMore?'future-user-notice-more-load':'future-user-notice-more-load-all']"
        >
          <span @click="loadMore">加载{{isLoadMore?'更多':'完成'}}</span>
        </div>
      </a-spin>
    </a-row>
    <a-row type="flex" justify="space-around" align="middle" style="border-top: 1px solid #e8eaec;">
      <div class="future-user-notice-clear">
        <a-icon type="delete" />
        <span @click="clearMessage">清理{{currentTabName}}</span>
      </div>
    </a-row>
  </div>
</template>
<script>
const noticeData = [
  {
    color: "#ffffff",
    backgroundColor: "#87d068",
    content: "久伴轻尘回复了你的邮件",
    time: "2020-07-15 14:33:18",
    userName: "QC"
  },
  {
    color: "#ffffff",
    backgroundColor: "#00a2ae",
    content: "柯南收藏了你的文章",
    time: "2020-07-15 14:34:19",
    userName: "KN"
  },
  {
    color: "#ffffff",
    backgroundColor: "#7265e6",
    content: "李白给你点了个大大的赞",
    time: "2020-07-15 14:35:20",
    userName: "LB"
  },
  {
    color: "#ffffff",
    backgroundColor: "#ffbf00",
    content: "西施偷偷看了你的相册",
    time: "2020-07-15 14:36:21",
    userName: "XS"
  },
  {
    color: "#f56a00",
    backgroundColor: "#fde3cf",
    content: "路飞邀请你一起去锤凯多",
    time: "2020-07-15 14:37:22",
    userName: "LF"
  }
];

const newsData = [
  {
    color: "#ffffff",
    backgroundColor: "#87d068",
    content: "久伴轻尘给你发送了一条私信",
    time: "2020-07-15 14:38:21",
    userName: "QC"
  },
  {
    color: "#ffffff",
    backgroundColor: "#7265e6",
    content: "雷军给你发送了一条信息",
    time: "2020-07-15 14:39:20",
    userName: "LJ"
  },
  {
    color: "#ffffff",
    backgroundColor: "#00a2ae",
    content: "马云给你发送了一条私信",
    time: "2020-07-15 14:39:19",
    userName: "MY"
  },
  {
    color: "#f56a00",
    backgroundColor: "#fde3cf",
    content: "丁三石给你发送了一条信息",
    time: "2020-07-15 14:39:20",
    userName: "DL"
  },
  {
    color: "#ffffff",
    backgroundColor: "#ffbf00",
    content: "李白给你发送了一条私信",
    time: "2020-07-15 14:39:19",
    userName: "LB"
  }
];

const waitingData = [
  {
    taskId: "1",
    taskName: "开发任务管理模块",
    status: "prepare",
    statusDesc: "未开始",
    description: "须在2020/07/30之前完成"
  },
  {
    taskId: "2",
    taskName: "集成工作流",
    status: "prepare",
    statusDesc: "未开始",
    description: "需要在2020/09/31之前完成"
  },
  {
    taskId: "3",
    taskName: "完成页面权限组件功能",
    status: "prepare",
    statusDesc: "未开始",
    description: "需要在2020/07/25之前完成"
  },
  {
    taskId: "4",
    taskName: "完成用户消息组件的开发",
    status: "doing",
    statusDesc: "正在进行",
    description: "需要在2020/07/18之前完成"
  },

  {
    taskId: "5",
    taskName: "优化table组件",
    status: "doing",
    statusDesc: "正在进行",
    description: "需要在2020/07/22之前完成"
  }
];

export default {
  data() {
    return {
      noticeData,
      newsData,
      waitingData,
      currentTabKey: "notice",
      spinning: false,
      isLoadMore: true
    };
  },
  methods: {
    loadMore() {
      if (!this.isLoadMore) return;
      this.spinning = true;
      setTimeout(() => {
        this.spinning = false;
        this.isLoadMore = false;
      }, 3000);
    },
    changeTab() {
      this.isLoadMore = true;
    },
    clearMessage() {
      this.$message.info("功能还在开发完善中...请等待！");
    }
  },
  filters: {
    switchType(status) {
      var type = null;
      switch (status) {
        case "prepare":
          type = null;
          break;
        case "doing":
          type = "blue";
          break;
        case "delay":
          type = "red";
          break;
      }
      return type;
    }
  },
  computed: {
    currentTabName() {
      var name = "";
      switch (this.currentTabKey) {
        case "notice":
          name = "通知";
          break;
        case "news":
          name = "消息";
          break;
        case "watting":
          name = "待办";
          break;
        default:
          name = "未知";
          break;
      }
      return name;
    }
  }
};
</script>

<style lang="less" scoped>
.future-user-message-container {
  width: 320px;
}
.future-user-message-container /deep/ .ant-tabs-bar {
  margin: 0 0;
}

.future-user-message-tab {
  //max-height: 360px;
  //overflow: auto;
}

.future-user-notice-list {
  line-height: normal;
}

.future-user-notice-item {
  padding: 12px 24px;
  cursor: pointer;
  border-bottom: 1px solid #e8eaec;
  transition: background-color 0.2s ease-in-out;
  align-items: center;
}

.future-user-notice-item-title {
  margin-bottom: 4px;
}
.future-user-notice-item-title h4 {
  margin-bottom: 0px;
}

.future-user-notice-item-title h4 /deep/ .ant-tag {
  float: right;
  margin-right: 0;
}

.future-user-notice-item-time,
.future-user-notice-item-desc {
  font-size: 12px;
  color: #808695;
}
.future-user-notice-more {
  padding: 6px 0;
  cursor: pointer;
}
.future-user-notice-more-load {
  color: #2d8cf0;
}
.future-user-notice-more-load-all {
  color: #c5c8ce;
}
.future-user-notice-clear {
  padding: 6px 0;
  cursor: pointer;
}

.future-user-notice-clear:hover {
  color: #2d8cf0;
}
</style>
